<template>
  <div class="proItem_box" @click="toProject">
    <div class="proItem_box_inner">
      <div class="proItem_box_h">
        <div class="proItem_box_h_l">
          <div class="proItem_box_h_l_title">{{ proData.projectStatusLabel }} | {{ proData.projectName }}</div>
          <div>
            <BaseTags :data-value="proData.trialStageLabel" v-if="proData.trialStageLabel"></BaseTags>
            <BaseTags data-value="保险" v-if="proData.injuryInsurance" type="purple"></BaseTags>
            <BaseTags data-value="CDE备案" v-if="proData.registrationNumber" type="green"></BaseTags>
          </div>
        </div>
        <div class="proItem_box_h_r">
          <van-image :src="proData.surfacePicture" lazy-load />
        </div>
      </div>
      <div class="proItem_box_content">
        <listItem v-for="item in fileList" :label="item.label" :value="proData[item.fileId]" :key="item.fileId"></listItem>
      </div>
    </div>
    <div class="proItem_box_foot">
      <van-button
        color="#E0EAFF"
        size="small"
        class="base-btn"
        style="margin-right: 10px; color: #2f54eb"
        id="recommend"
        @click.stop="toTQ"
      >
        我要推荐
      </van-button>
      <van-button color="#2F54EB" size="small" class="base-btn" id="application" @click.stop="toTQ">我要报名</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, PropType } from "vue";
import listItem from "@/components/BaseList/index.vue";
import { useRouter } from "vue-router";

const router = useRouter();

const props = defineProps({
  proData: {
    type: Object as PropType<Recordable>,
    default: () => ({})
  },

  fileList: {
    type: Array as PropType<{ label: string; fileId: string }[]>,
    default: () => []
  }
});

const toProject = () => {
  router.push("/project/" + props.proData.id);
};

const toTQ = () => {
  console.log("aaa");
};
</script>

<style lang="scss">
.proItem_box {
  background-color: #fff;
  border: 1px solid #dee6f7;
  border-radius: 8px;

  // padding: 24rpx 32rpx 0;

  .proItem_box_inner {
    padding: 12px 16px 0;
  }

  .proItem_box_h {
    display: flex;
  }

  .proItem_box_h_l {
    flex: 1;

    .proItem_box_h_l_title {
      display: -webkit-box;
      height: 44px;
      margin-bottom: 8px;
      overflow: hidden;
      font-size: 14px;
      font-weight: bold;
      line-height: 22px;
      color: #515e94;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .tag {
      display: inline-block;
      padding: 3px 8px;
      margin-right: 10px;
      font-size: 12px;
      font-weight: bold;
      color: #3989e5;
      background-color: rgb(69 153 250 / 19%);
      border-radius: 3px;

      &.tag1 {
        color: #615bf1;
        background-color: #dbe0ff;
      }

      &.tag2 {
        color: #13c2c2;
        background-color: #d8f6f5;
      }
    }
  }

  .proItem_box_h_r {
    width: 70px;
    padding-left: 10px;
    text-align: center;

    .van-image {
      width: 70px;
      height: 44px;
      margin-bottom: 3px;
      background-color: #f2f3f5;
      border-radius: 3px;
    }

    text {
      font-size: 14px;
      font-weight: 600;
      line-height: 22px;
      color: #333;
    }
  }

  .proItem_box_content {
    margin: 10px 0;
  }

  .proItem_box_foot {
    padding: 5px 16px;
    text-align: right;
    border-top: 1px solid #dee6f7;
  }
}
</style>
